<template>
  <div class="pagination-container">
    <el-pagination v-bind="$attrs"
                   :total="config.total"
                   layout="total, sizes, prev, pager, next, jumper"
                   @size-change="sizeChange" :pageSize="config.pageSize"
                   :currentPage.sync="config.currentPage" @current-change="currentChange"
                   @prev-click="prevClick" @next-click="nextClick"></el-pagination>
  </div>
</template>

<script>

import request from "../../../utils/request";

export default {
  name: 'TPagination',
  props: {
    url: String,
    data: Array,
    queryParams: [Object]
  },
  computed: {},
  data() {
    return {
      config: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
    }
  },
  methods: {
    /* 分页条-start */
    sizeChange(pageSize) {
      this.config.pageSize = pageSize
      this.loadTableData()
    },
    currentChange(currentPage) {
      this.config.currentPage = currentPage
      this.loadTableData()
    },
    prevClick(pageSize) {
      this.loadTableData()
    },
    nextClick(currentPage) {
      this.loadTableData()
    },
    loadTableData() {
      let myPromise = new Promise((resolve, reject) => {
        if (this.url) {
          request({
            url: `${this.url}/${this.config.currentPage}/${this.config.pageSize}`.replaceAll("//", "/"),
            params: this.queryParams || {},
            method: 'get',
          }).then(data => {
            this.config.total = data.data.total
            this.$emit("update:data", data.data.records)
            resolve()
          }).catch(error => {
            console.log(error)
            reject()
          })
        }
      })
      return myPromise
    },
  }
}
</script>

<style scoped>
</style>
